<template>
  <view >

     <view class="crumb">
       <view v-for="(val,idx) in typeList" :class="type===idx?'active':''" @tap="typeChange(idx)">{{val.text}}</view>
     </view>

    <view class="item" v-for="(val,idx) in lists" @tap="$xyfun.to('/pages/user/order_detail?id='+val.id)">
      <view class="nav">
        <view>服务订单</view>
        <view class="time">申请时间：{{$xyfun.timeFormat(val.createtime)}}</view>
      </view>
      <view class="user">
        <view><text>学生姓名</text>：{{val.student}}</view>
        <view><text>性别</text>：{{val.sex}}</view>
        <view><text>科目</text>：{{val.subject_text}}</view>
        <view><text>年级</text>：{{val.grade_text}}</view>
      </view>
       <view class="line">辅导地址：{{val.addr}}</view>
       <view class="line">辅导时间：{{val.per_week_time_text}}</view>
       <view class="line">辅学生情况：{{val.state}}</view>
      <view class="teacher" v-if="val.status>=2">
        <view class="tit">家长电话</view>
        <view class="mobile" @click.stop="call(val.mobile)">{{val.mobile}}<text class="yz-iconfont yz-dianhua"></text></view>
      </view>
      <view class="confirm" v-if="val.status==1">
        <view @click.stop="refund_open(idx)">拒绝</view>
        <view @click.stop="agree_order(idx)" class="agree">接受</view>
      </view>
    </view>


    <view class="xy-modal-box xy-modal-box-center refund-box" :class="[refundModelShow?'xy-modal-show':'']">
      <view class="refund-tite">
        <text>请填写拒绝原因</text>
        <text class="yz-iconfont yz-guanbi" @tap="refundModelShow=!refundModelShow"></text>
      </view>
      <view class="refund-content">
        <textarea placeholder="请填写拒绝原因" v-model="refund_reason"></textarea>
      </view>

      <view class="refund-action">
        <view class="yes" @tap="refund_confirm">确认</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[refundModelShow?'xy-mask-show':'']" @tap="refundModelShow =!refundModelShow"></view>



    <view class="xy-modal-box xy-modal-box-center agreement-box" :class="[agreementModelShow?'xy-modal-show':'']">
      <view class="agree-title">{{agree_title}}</view>
      <view class="agree-content">
        <rich-text :nodes="agree_content"></rich-text>
      </view>

      <view class="agree-action">
        <view class="yes" @tap="pay_deposit" v-if="need_pay_deposit">去缴纳押金</view>
        <view class="yes" @tap="pay_agency" v-if="need_pay_agency">去缴纳接单费用</view>
        <view class="no" @tap="agreementModelShow=false">取消</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[agreementModelShow?'xy-mask-show':'']" @tap="agreementModelShow =!agreementModelShow"></view>

    <payPop ref='payPop' title="请缴纳接单费用" @createOrder="createOrder"></payPop>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import payPop from "@/components/paypop/index.vue";
import Pay from '@/utils/pay';

export default {
  components: {payPop},
  data() {
    return {
      disable: false,
      agree_id : '',
      deposit_order : '',

      type : 0,
      typeList: [
        {
          status : 1,
          text : '待接单'
        },
        {
          status : 2,
          text : '试课中'
        },
        {
          status : 3,
          text : '已完成'
        },
        {
          status : -2,
          text : '重新试课'
        }
      ],
      lists : [],
      isEmpty: true,
      currentPage: 1,
      lastPage: 1,

      refund_order_id : '',
      refund_reason : '',
      refundModelShow:false,

      agree_title : '',
      agree_content : '',
      agreementModelShow:false,

      pay_service: '',
      need_pay_deposit: false,
      need_pay_agency: false
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods:{
    async loadData() {
      this.$api.getBase({
        url: '/news/detail',
        loadingTip:'加载中...',
        data: {
          id:17,
        },
        success: res => {
          this.agree_title = res.name;
          this.agree_content = res.content;
        }
      });
      this.$api.postBase({
        url: 'teacher_order/teacher_order',
        loadingTip: '加载中...',
        data: {
          page: this.currentPage,
          status : this.typeList[this.type].status
        },
        success: res => {
          uni.stopPullDownRefresh();

          this.lists = [...this.lists,...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      })
    },
    typeChange(e){
      this.type = e;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },


    createOrder(pay_type){
      var that = this;

      // 提交订单
      this.$api.postBase({
        url: '/deposit/add_order',
        data: {
          teacher_order_id:that.agree_id,
          pay_service : that.pay_service
        },
        loadingTip: '提交订单中...',
        success: res => {
          //发起支付
          var pay = new Pay(pay_type, res, 'deposit');
          pay.payMehod().then((res1)=>{
            console.log(res)
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            that.$refs.payPop.buyModelShow = false;

            let refresh = false;
            if(res.service_type=='agency'){
              that.need_pay_agency = false;
              if(!that.need_pay_deposit){
                refresh = true;
              }else{
                uni.showModal({
                  title: '提示',
                  content: '请再缴纳押金才能完成接单',
                  confirmText: '去缴纳',
                  success: function (res) {
                    if(res.confirm){
                      that.pay_deposit()
                    }
                  }
                });
              }
            }
            if(res.service_type=='deposit'){
              that.need_pay_deposit = false;
              if(!that.need_pay_agency){
                refresh = true;
              }else{
                uni.showModal({
                  title: '提示',
                  content: '请再缴纳接单费用才能完成接单',
                  confirmText: '去缴纳',
                  success: function (res) {
                    if(res.confirm){
                      that.pay_agency()
                    }
                  }
                });
              }
            }
            if(refresh){
              that.currentPage = 1;
              that.lists = [];
              that.type = 1;
              that.loadData();
              that.$xyfun.to('/pages/user/order_detail?id='+that.agree_id)
            }


            // pay.payResult(res)
          },(res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            // pay.payResult(res)
          });
        }
      });
    },

    //拨打电话
    call(mobile){
      uni.makePhoneCall({
        phoneNumber : mobile,
      })
    },

    agree_order(idx){
      var that = this;
      this.$api.getBase({
        url: '/deposit/prepre_accept',
        loadingTip:'加载中...',
        data: {
          order_id : this.lists[idx].id
        },
        success: res => {
          that.need_pay_agency = res.need_pay_agency;
          that.need_pay_deposit = res.need_pay_deposit;
          that.agreementModelShow = true;
          that.agree_id = that.lists[idx].id;
        }
      });
    },

    pay_agency(){
      this.pay_service = 'agency';
      this.agreementModelShow = false;
      this.$refs.payPop.showDiaLog(this.common.customConfig.agency_money)
    },

    pay_deposit(){
      this.pay_service = 'deposit';
      this.agreementModelShow = false;
      this.$refs.payPop.showDiaLog(this.common.customConfig.deposit_money)
    },

    // agree_order(idx){
    //   if(!this.agree){
    //     this.agreementModelShow = true;
    //     this.agree = true;
    //     return;
    //   }
    //   var that = this;
    //   this.$api.postBase({
    //     url: 'teacher_order/agree',
    //     loadingTip: '加载中...',
    //     data: {
    //       id : that.lists[idx].id,
    //     },
    //     success: res => {
    //       that.lists[idx].status = 2;
    //     }
    //   })
    // },
    
    refund_open(idx){
      this.refund_order_id = this.lists[idx].id;
      this.refundModelShow = true;
    },
    refund_confirm(){
      var that = this;
      this.$api.postBase({
        url: 'teacher_order/refuse',
        loadingTip: '加载中...',
        data: {
          id : that.refund_order_id,
          refund_reason : that.refund_reason
        },
        success: res => {
          that.refundModelShow = false;
          that.currentPage = 1;
          that.lists = [];
          that.loadData();
        }
      })
    },

  }
}
</script>


<style>
page{
  background-color: #f9f9f9;
}
</style>
<style lang="scss">
.crumb {
  display: flex;
  justify-content: space-evenly;
  background: #fff;
  padding-top: 20rpx;
  .active {
    color: #65b8d5;
    border-bottom: 8rpx solid #1e98c4;
    padding-bottom: 20rpx;
    border-radius: 4rpx;
  }
}

.item{
  background: #fff;
  padding: 40rpx 40rpx;
  margin: 20rpx 20rpx;
  .nav{
    display: flex;
    justify-content: space-between;
    .time{
      font-size: 20rpx;
      margin-left:20rpx;
      margin-top: 6rpx;
    }
  }
  .user{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24rpx;
    view{
      text{
        display: inline-block;
        width: 100rpx;
        text-align-last: justify;
      }
      margin-top: 20rpx;
      width: 50%;
    }
  }
  .line{
    font-size: 24rpx;
    margin-top: 20rpx;
  }
  .teacher{
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tit{
      font-size: 24rpx;
    }
    .mobile{
      font-size: 32rpx;
      .yz-iconfont{
        font-size: 34rpx;
        color: $uni-color-warning;
        margin-left: 20rpx;
      }
    }
  }
}


.confirm{
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  view{
    color: #555;
    background:#e1e1e1;
    border-radius: 6rpx;
    padding: 10rpx 110rpx;
  }
  .agree{
    color: #fff;
    background: #1c98c4;
  }
}
.refund-box{
  width: 80%;
  border-radius: 15rpx;
  .refund-tite{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-weight: bold;
    position: relative;
    .yz-iconfont{
      position: absolute;
      right: 20rpx;
      top: 0;
      color : #a6a6a6;
    }
  }
  .refund-content{
    padding: 0 20rpx;
    textarea{
      width: 100%;
      box-sizing: border-box;
      background: #f2f2f2;
      border-radius: 10rpx;
      padding: 20rpx;
      font-size: 26rpx;
    }
  }
  .refund-action{
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    view{
      width: 200rpx;
      height: 60rpx;
      border-radius: 10rpx;
      line-height: 60rpx;
      text-align: center;
    }
    .yes{
      background: $uni-color-primary;
      color: #fff;
    }
  }
}

.agreement-box{
  width: 95%;
  height: 80vh;
  border-radius: 15rpx;
  .agree-title{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .agree-content{
    padding: 0 20rpx;
    height: calc(80vh - 200rpx);
    overflow: scroll;

  }
  .agree-action{
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    view{
      width: auto;
      padding: 10rpx 30rpx;
      height: 70rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      text-align: center;
      font-size: 28rpx;
      display: flex;
      align-items: center;
    }
    .countdown{
      width: 100%;
      background: #f2f2f2;
      color: #333333;
    }
    .yes{
      background: $uni-color-primary;
      color: #fff;
    }
    .no{

    }

  }
}
</style>
